<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="search" style="height: 64px">
      <el-form :inline="true" >
        <el-form-item label="合作商搜索:">
          <el-input v-model="searchName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="onSubmit"> <i class="el-icon-search"></i> 查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 下面的大盒子 -->
    <div class="result">
      <div class="operation">
        <!-- 头部 -->
        <el-button @click="visible=true">
          <i class="el-icon-circle-plus-outline"></i> 新建
        </el-button>
      </div>
      <!-- 列表 -->
      <el-table :data="list" style="width: 100%">
      <el-table-column type="index" label="序号" width="80"> </el-table-column>
      <el-table-column prop="name" label="合作商" width="120"> </el-table-column>
      <el-table-column prop="account" label="账号" width="120"></el-table-column>
      <el-table-column prop="vmCount" label="设备数量" width="100"></el-table-column>
      <el-table-column prop="ratio" label="分成比例" width="100"></el-table-column>
      <el-table-column prop="contact" label="联系人" width="150"></el-table-column>
      <el-table-column prop="mobile" label="联系电话" width="150"></el-table-column>
      <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <div class="actions">
              <span @click="reset(row)">重置密码</span>
              <span @click="views(row)">查看详情</span>
              <span @click="edit(row)">修改</span>
              <span @click="del(row.id)" class="red">删除</span>
            </div>
          </template>
      </el-table-column>
    </el-table>
    <div class="footer">
        <!-- 左边 -->
        <div class="text">
          共 {{ total }} 条数据 第{{ listData.pageIndex }}/{{ totalPage }}页
        </div>
        <!-- 右边按钮 -->
        <div class="btn">
          <button type="button" @click="pre">上一页</button>
          <button @click="next">下一页</button>
        </div>
      </div>
    </div>
    <!-- 新增和修改的弹窗 -->
    <el-dialog v-if="!(drawerType==='views')"
    ref="diaForm"
    :title="drawerTitle"
    :visible.sync="visible"
    width="50%"
    @close="closeFn"
     >
      <el-form ref="diaForm" :model="diaForm" :rules="diaRules" label-position="right" label-width="auto">
        <el-form-item label="合作商名称：" prop="name" >
          <el-input v-model="diaForm.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="联系人：" prop="contact">
          <el-input v-model="diaForm.contact" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="mobile">
          <el-input v-model="diaForm.mobile" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="分成比例(%):" prop="ratio" >
          <el-input-number v-model="num"  controls-position="right"
          style="width: 80%" :min="1" :max="100">
          </el-input-number>
        </el-form-item>
        <!-- <el-form-item label="分成比例(%):" prop="ratio" >
          <el-input type="number" v-model="diaForm.ratio" style="width: 80%"></el-input>
        </el-form-item> -->
        <el-form-item v-if="drawerType==='add'"  label="账号:" prop="account" >
          <el-input v-model="diaForm.account" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item v-if="drawerType==='add'" label="密码:" prop="password" >
          <el-input v-model="diaForm.password" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click.native="closeFn">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </div>
    </el-dialog>
    <!-- 查看详情的弹窗 -->
    <el-dialog v-if="drawerType==='views'" ref="diaForm" title="合作商详情" :visible.sync="visible" width="50%" @close="closeFn" >
      <p>
        <span>合作商名称:{{formData.name}}</span>
        <span>联系人: {{formData.contact}} </span>
      </p>
      <p>
        <span>联系电话: {{formData.mobile}} </span>
        <span>分成比例: {{formData.ratio}}% </span>
      </p>
    </el-dialog>
  </div>
</template>

<script>
import { partnerList, resetPwd, delPartner, addPartner, editPartner } from '@/api/point'
export default {
  data () {
    return {
      num: '',
      list: [],
      searchName: '',
      listData: {
        pageIndex: 1,
        pageSize: 10
      },
      total: '', // 总条数
      totalPage: '', // 总页数
      visible: false,
      formData: {
        name: '', // 合作商
        account: '', // 账号
        vmCount: '', // 设备数量
        ratio: '', // 分成比例
        contact: '', // 联系人
        mobile: '', // 联系电话
        password: '' // 密码
      },
      drawerType: 'add',
      diaForm: {
        name: '',
        contact: '',
        mobile: '',
        ratio: '',
        account: '',
        password: ''
      },
      diaRules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        contact: [{ required: true, message: '请输入', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
        ratio: [{ required: true, message: '请输入', trigger: 'blur' }],
        account: [{ required: true, message: '请输入', trigger: 'blur' }],
        password: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 弹框类型
    drawerTitle () {
      let title = '新增合作商'
      if (this.drawerType === 'views') title = '合作商详情'
      if (this.drawerType === 'edit') title = '修改合作商'
      return title
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async onSubmit () {
      const res = await partnerList({ ...this.regionData, name: this.searchName })
      this.list = res.currentPageRecords
    },
    async getList () {
      const res = await partnerList(this.listData)
      this.list = res.currentPageRecords
      this.total = res.totalCount
      this.totalPage = res.totalPage
      console.log(res)
    },
    // 上一页
    pre () {
      if (this.listData.pageIndex === 1) return
      this.listData.pageIndex--
      this.getList()
    },
    // 下一页
    next () {
      if (this.listData.pageIndex >= this.totalPage) return
      this.listData.pageIndex++
      this.getList()
    },
    // 重置密码
    async reset (row) {
      console.log(row)
      await resetPwd(row.id)
      this.$message.success('重置成功')
    },
    // 删除
    async del (id) {
      await delPartner(id)
      this.getList()
      this.$message.success('删除成功')
    },
    // 查看详情
    views (row) {
      console.log(row)
      this.openDrawer('views')
      this.formData = { ...row }
      console.log(this.formData)
    },

    // 关闭弹窗
    closeFn () {
      this.$refs.diaForm.resetFields()
      this.visible = false
      this.formData = {
        name: '', // 合作商
        account: '', // 账号
        vmCount: '', // 设备数量
        ratio: '', // 分成比例
        contact: '', // 联系人
        mobile: ''// 联系电话
      }
    },
    // 打开弹框
    openDrawer (type) {
      this.drawerType = type
      this.visible = true
    },
    // 新增提交
    async submit () {
      if (this.drawerType === 'add') {
        await addPartner(this.diaForm)
        this.$message.success('添加成功')
      }
      if (this.drawerType === 'edit') {
        await editPartner(this.diaForm)
        this.$message.success('添加成功')
      }
      this.closeFn()
      this.getList()
    },
    // 修改
    edit (row) {
      this.openDrawer('edit')
      this.diaForm = { ...row }
    }
  }

}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  height: 64px;
  width: 100%;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 20px;
  padding-left: 17px;
  background-color: #fff;
  .el-form {
    padding-top: 20px;
  }
}
.result {
  padding: 10px;
  width: 100%;
  background-color: #fff;
  .operation {
    margin-bottom: 20px;
    width: 40px;
    height: 20px;
    .el-button {
      align-items: center;
      width: 80px !important;
      height: 36px;
      padding: 0;
      color: #fff;
      font-size: 16px;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    }
  }
}
.actions {
    font-size: 14px;
    display: flex;
    justify-content: space-around;
    color: #666;
    .red {
      color: red;
    }
}
.footer {
    display: flex;
    width: 100%;
    padding: 20px 10px;
    justify-content: space-between;
    .text {
      margin-right: 10px;
      font-size: 18px;
      color: #dde1e7;
    }
    .btn {
      button {
        padding: 5px 10px;
        margin-right: 10px;
      }
    }
  }
.el-dialog {
  .el-dialog__body {
    p {
      display: flex;
      justify-content: space-around;
      height: 20px;
      line-height: 20px;
      margin-bottom: 30px;
      font-size: 16px;
    }
  }
}
.dialog-footer {
  width: 100%;
  display: inline-block;
  text-align: center;
  .el-button--primary {
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  }
}
</style>
